<template>
	<view class="app">
		<tui-tabs :tabs="tabs" isFixed :currentTab="currentTab" selectedColor="#5677fc" sliderBgColor="#5677fc" @change="change" itemWidth="50%"></tui-tabs>

		<view class="item b-b" :class="{ income: item.money > 0 }" v-for="(item, index) in list" :key="index">
			<view class="left column">
				<view class="tit clamp">姓名：{{ item.realName }}</view>
				<view class="tit clamp">支付宝账号：{{ item.alipayAccount }}</view>
				<view class="tit ">提现金额：{{ item.totalAmount }}</view>
				<view class="tit clamp">手续费：{{ item.serviceCharge }}</view>
			</view>

			<text class="price">{{ item.state }}</text>
		</view>

		<tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!loading && !list.length">暂无记录</tui-no-data>
		<view v-if="!loading && list.length" class="loading-more"><text class="loading-more-text">~~没有更多了~~</text></view>
		<Loading v-if="loading"></Loading>
	</view>
</template>

<script>
import { withdrawDepositListPage } from '@/service/mine.js';

export default {
	data() {
		return {
			tabs: [
				{
					name: '审核中'
				},
				{
					name: '已完成'
				},
				{
					name: '已驳回'
				}
			],
			currentTab: 0,
			params: {
				pageNum: 1,
				pageSize: 10
			},
			loading: true,
			list: [],
			type: { 0: 'waitAudit', 1: 'finished', 2: 'reject' }
		};
	},
	onLoad() {
		this.getLog();
	},
	onPullDownRefresh() {
		this.params.pageNum = 1;
		this.getLog();
		setTimeout(v => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.getLog();
	},
	methods: {
		change({ index }) {
			this.currentTab = index;
			this.params.pageNum = 1;
			this.list = [];
			this.getLog();
		},
		async getLog() {
			try {
				this.loading = true;

				const resp = await withdrawDepositListPage({ ...this.params, withdrawRequestState: this.type[this.currentTab] });
				resp.data = resp.data.map(v => {
					v.serviceCharge = Number(v.serviceCharge).toFixed(2);
					v.totalAmount = Number(v.totalAmount).toFixed(2);
					v.state = v.withdrawRequestState == 'waitAudit' ? '审核中' : v.withdrawRequestState == 'finished' ? '完成' : '驳回';
					return v;
				});
				this.list = this.params.pageNum == 1 ? resp.data : [...this.list, ...resp.data];
				this.params.pageNum++;
			} finally {
				this.loading = false;
				//TODO handle the exception
			}
		}
	}
};
</script>

<style scoped lang="scss">
.app {
	padding-top: 100upx;
}
.item {
	display: flex;
	padding: 30rpx 30rpx 30rpx 24rpx;
	// padding-bottom: 20upx;
	margin-bottom: 20upx;
	background-color: #fff;

	&:after {
		left: 30rpx;
		border-color: #e8e8e8;
	}
	.mix-icon {
		flex-shrink: 0;
		width: 72rpx;
		font-size: 52rpx;
		transform: translateY(-6rpx);
	}
	.icon-tixian1 {
		color: #fd6663;
	}
	.icon-zhangdanmingxi01 {
		color: #ff893a;
	}
	.icon-chongzhi {
		color: #39c585;
	}
	.left {
		margin-left: 20upx;
		flex: 1;
		overflow: hidden;
	}
	.tit {
		font-size: 30rpx;
		color: #333;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}
	.time {
		font-size: 24rpx;
		color: #999;
	}
	.price {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: $uni-color-primary;
		font-weight: 700;
	}
	&.income {
		.price {
			color: #00c700;
		}
		.icon-zhangdanmingxi01 {
			color: #39c585;
		}
	}
}
</style>
